<script lang="ts" setup>

import { ikValidate } from 'iking-utils'
import { userApi } from '@/api/system'
import { FormItemRule, FormRules, useMessage } from 'naive-ui'

const message = useMessage()

const emits = defineEmits(['close'])

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
})

const refPass = ref()

const _visible = computed(() => props.visible)

const form = ref({
  newPassword: '',
  newPassword_r: '',
  oldPassword: '',
  userId: '',
})

const rules: FormRules = {
  newPassword: [
    {
      key: 'newPassword',
      required: true,
      validator(rule: FormItemRule, value: string) {
        if(! value) {
          return new Error('请输入新密码')
        } else if (value === form.value.oldPassword) {
          return new Error('新密码不能与原密码相同')
        } else if (! ikValidate.password.test(value)) {
          return new Error('至少6位，且包含大小写字母、数字、符号(+-.!@#$%^&*?)')
        }
        return true
      },
      trigger: ['blur'],
    },
  ],
  newPassword_r: [
    {
      required: true,
      validator: (rule: any, value: any) => {
        if (!value) {
          return new Error('请重复输入新密码')
        }
        if (value !== form.value.newPassword) {
          return new Error('两次输入密码不一致')
        }
        return true
      },
      trigger: 'blur',
    },
  ],
  oldPassword: [
    {
      required: true,
      validator(rule: FormItemRule, value: string) {
        if(! value) {
          return new Error('请输入原密码')
        } else {
          refPass.value?.validate(() => {}, rule => { return rule?.key === 'newPassword' })
          return true
        }
      },
      trigger: ['blur'],
    },
  ],
}


const handleLogin = async () => {
  refPass.value?.validate(async (errors: any) => {
    if (!errors) {
      const userId = localStorage.getItem('userId')
      const param: any = { ...form.value , userId: userId }
      const { success, msg } = await userApi.updatePwd(param)
      if (success) {
        handleCancel()
        resetForm()
      }
      else { message.error(msg) }
    }
  })
}

const resetForm = () => {
  form.value = {
    newPassword: '',
    newPassword_r: '',
    oldPassword: '',
    userId: '',
  }
}

const handleCancel = () => {
  emits('close', false)
  resetForm()
}

</script>

<template>
  <n-modal
    v-model:show="_visible"
    destroy-on-close
    preset="dialog"
    title="修改密码"
    :bordered="false"
    :show-icon="false"
    label-width="80px"
    @update:show="handleCancel"
  >
    <n-form
      ref="refPass"
      :model="form"
      :rules="rules"
      label-placement="left"
    >
      <n-form-item label="原密码" path="oldPassword">
        <n-input
          v-model:value="form.oldPassword"
          type="password"
          size="large"
          placeholder="请输入原密码"
        />
      </n-form-item>
      <n-form-item label="新密码" path="newPassword">
        <n-input
          v-model:value="form.newPassword"
          type="password"
          size="large"
          placeholder="请输入新密码"
        />
      </n-form-item>
      <n-form-item label="原密码" path="newPassword_r">
        <n-input
          v-model:value="form.newPassword_r"
          type="password"
          size="large"
          placeholder="请输入原密码"
        />
      </n-form-item>
    </n-form>
    <template #action>
      <n-button @click="handleCancel">取消</n-button>
      <n-button type="primary" @click="handleLogin">确定</n-button>
    </template>
  </n-modal>
</template>

<style scoped lang="scss">

</style>
